<template>
  <div class="rule">
    <el-row>
      <el-col :span="24">
        <el-form
          v-show="flag"
          ref="queryForm"
          :model="tabue"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="规则名称" prop="engineName">
            <el-input
              v-model="tabue.engineName"
              placeholder="请输入规则名称"
              clearable
              size="small"
              @keyup.enter.native="seatedser"
            />
          </el-form-item>
          <el-form-item label="代码类型" prop="codeType">
            <el-select v-model="tabue.codeType" placeholder="请选择代码类型">
              <el-option
                v-for="item in codeTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="类/函数名称" prop="clName" label-width="120px">
            <el-input
              v-model="tabue.clName"
              placeholder="请输入类/函数名称"
              clearable
              size="small"
              @keyup.enter.native="seatedser"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="cyan"
              icon="el-icon-search"
              size="mini"
              @click="seatedser"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="reset"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row class="list_add">
      <el-col :span="12">
        <el-button
          icon="el-icon-plus"
          type="primary"
          class="iconfonted"
          @click="dialogFormVisible = true"
          >新增</el-button
        >
      </el-col>
      <el-col :span="12">
        <div class="rule_rig">
          <!-- 显示 与 隐藏 -->
          <i class="el-icon-search" type="primary" plain @click="searched"></i>
          <!-- 刷新 -->
          <i class="el-icon-refresh" @click="refresh"></i>
        </div>
      </el-col>
    </el-row>

    <div class="rule_main">
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        slot="header"
      >
        <el-table-column prop="engineName" label="规则名称" width="200">
        </el-table-column>
        <el-table-column prop="engineTypeId" label="规则类型id" width="200">
        </el-table-column>
        <el-table-column prop="codeType" label="代码类型" width="200">
        </el-table-column>
        <el-table-column prop="clName" label="类/函数名称" width="300">
        </el-table-column>
        <el-table-column label="操作" width="400">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-edit"
              type="text"
              size="small"
              @click="setDate(scope.row)"
              >修改</el-button
            >
            <el-button
              icon="el-icon-edit"
              type="text"
              size="small"
              class="main_btn"
              @click="handleUpdate2(scope.row)"
              >编写代码</el-button
            >
            <el-button
              icon="el-icon-delete"
              type="text"
              size="small"
              @click="deleted(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="tabue.pageNum"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="tabue.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 弹框 -->
    <el-dialog
      :title="this.id ? '修改数据规则引擎 ' : ' 添加数据规则引擎'"
      :visible.sync="dialogFormVisible"
    >
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item
          label="规则名称"
          :rules="[{ required: true, message: '规则名称不能为空' }]"
          :label-width="formLabelWidth"
          prop="engineName"
        >
          <el-input
            v-model="form.engineName"
            auto-complete="off"
            placeholder="请选择规则名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="规则类型"
          :rules="[{ required: true, message: '规则类型不能为空' }]"
          :label-width="formLabelWidth"
          prop="engineTypeId"
        >
          <el-select v-model="form.engineTypeId" placeholder="请选择规则类型">
            <el-option
              v-for="item in listEnder"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="代码类型"
          :rules="[{ required: true, message: '代码类型不能为空' }]"
          :label-width="formLabelWidth"
          prop="codeType"
        >
          <el-select v-model="form.codeType" placeholder="请选择代码类型">
            <el-option
              v-for="item in codeTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="类/代码名称"
          :rules="[
            { required: true, message: '类/代码名称不能为空' },
            { type: 'string', message: '类/代码名称必须为字符串' },
          ]"
          :label-width="formLabelWidth"
          prop="clName"
        >
          <el-input
            v-model="form.clName"
            auto-complete="off"
            placeholder="请选择类/代码名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="dataQuery">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编写代码 -->
    <el-dialog
      title="编写代码"
      :visible.sync="dialogForm"
      width="1200px"
      append-to-body
    >
      <div class="editor-container">
        <json-editor
          v-if="dialogForm"
          ref="jsonEditor"
          v-model="codeRow.engineCode"
          :language="codeRow.codeType"
          :name="codeRow.className"
        />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm2">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listEngine,
  delEngine,
  getEngine,
  addEngine,
  updateEngine,
  listEngineType,
  updateCode,
} from "@/api/engine";
import JsonEditor from "@/components/JsonEditor";

export default {
  components: { JsonEditor },
  data() {
    return {
      dialogFormVisible: false, //弹框
      dialogForm: false, //编写代码
      loading: true,
      tabue: {
        pageNum: 1, //当前页码
        pageSize: 5, //当前页条数
        engineName: null, //引擎名
        codeType: null, //类型
        clName: null, //列表名
      },
      total: 0,
      id: [],
      // 代码类型
      codeTypeList: [
        {
          value: "java",
          label: "java",
        },
        {
          value: "sql",
          label: "sql",
        },
      ],
      // 表格数据
      tableData: [],
      // 弹框数据
      form: {},
      listEnder: [],
      formLabelWidth: "120px",
      flag: true,
      // 代码
      codeRow: {
        engineId: "",
        code: "",
        codeType: "",
        className: "",
      },
    };
  },
  created() {
    this.getList();
    this.getType();
  },
  methods: {
    // 获取数据
    getList() {
      this.loading = true;
      listEngine(this.tabue).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
    // 搜索
    seatedser() {
      this.tabue.pageNum = 1;
      this.getList();
    },
    // 重置
    reset() {
      this.tabue.engineName = "";
      this.tabue.codeType = "";
      this.tabue.clName = "";
      this.seatedser();
    },
    reserted() {
      this.form = {
        id: null,
        engineName: null,
        engineTypeId: null,
        codeType: null,
        clName: null,
        revision: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
      };
    },
    // 显示与隐藏
    searched() {
      this.flag = !this.flag;
    },
    // 刷新
    refresh() {
      this.getList();
    },
    // 获取类型
    getType() {
      listEngineType().then((res) => {
        res.data.forEach((item) => {
          this.listEnder.push({
            value: item.id,
            label: item.engineType,
          });
        });
      });
    },
    dataQuery() {
      // 添加
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateEngine(this.form).then((res) => {
              console.log(res);
              if (res.code === 200) {
                this.msgSuccess("修改成功");
                this.getList();

                this.reserted();
              }
            });
          } else {
            addEngine(this.form).then((res) => {
              if (res.code === 200) {
                this.msgSuccess("新增成功");
                this.getList();
                this.reserted();
              }
            });
          }
          this.dialogFormVisible = false;
        }
      });
    },
    // 修改
    setDate(data) {
      this.reserted();
      const id = data.id || this.id;
      getEngine(id).then((response) => {
        this.form = response.data;
        this.dialogFormVisible = true;
      });
    },
    // 取消
    cancel() {
      this.dialogFormVisible = false;
      this.dialogForm = false;
      this.reserted();
    },
    // 删除
    deleted(data) {
      const id = data.id || this.id;
      this.$confirm("是否确定删除名称为" + data.clName, "是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return delEngine(id);
        })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 监听当前页每页的条数
    handleSizeChange(val) {
      this.tabue.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.tabue.pageNum = val;
      this.getList();
    },
    /** 编辑代码按钮操作 */
    handleUpdate2(row) {
      this.codeRow = row;
      this.codeRow.engineId = row.id;
      this.codeRow.codeType = row.codeType;
      this.codeRow.className = "ETL_RULE_" + Date.parse(new Date()) / 1000;
      this.codeRow.engineCode = row.engineCode ? row.engineCode : "";
      this.dialogForm = true;
    },
    // 代码编写提交
    submitForm2() {
      console.log(this.value, "bbbb", this.codeRow);
      updateCode(this.codeRow).then((response) => {
        if (response.code === 200) {
          this.msgSuccess("编辑成功");
          this.dialogForm = false;
          this.getList();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.rule {
  width: 100%;
  height: 100%;
  padding: 20px;
  font-size: 14px;
  .search {
    width: 100%;
    display: flex;
    .type {
      margin: 0 20px;
    }
    .nlname {
      margin: 0 10px;
    }
    .iconfonted {
      margin-left: 10px;
    }
  }
  .list_add {
    margin: 20px 0;
    .rule_rig {
      display: flex;
      width: 80px;
      float: right;
      justify-content: space-between;
      i {
        display: inline-block;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border-radius: 50%;
        border: 1px solid #ddd;
      }
    }
  }

  .rule_main {
    width: 100%;
    text-align: center;
    .el-table th,
    .el-table td {
      text-align: center;
    }
    .main_btn {
      margin: 0 20px;
    }
  }
}
</style>